const path = require('path');

const {
    override,
    addLessLoader, // 用于加载less文件
    overrideDevServer,
    fixBabelImports, // antd的按需加载插件
    addPostcssPlugins, // 转换css文件的工具
    addDecoratorsLegacy,//装饰器，类组件使用高阶组件需要
    addWebpackAlias, // 用于配置别名的 路径别名，用于较深目录的路径读取
} = require('customize-cra');
const SpritesmithPlugin = require('webpack-spritesmith');

// // 环境标识（后期可能会被挪到一个独立的全局变量声明文件中，以避免多处重复声明）
// const DEV = 'development'
// const PROD = 'production'
// 获取接口域名及端口等信息
const apiBaseUrl = process.env.REACT_APP_API

function addProxy() {
    return config => {
        // 将配置好的config返回给customize-cra
        return {
            // 保证原有的config不受影响
            ...config,
            // 配置代理
            proxy: {
                // 拦截器（拦截所有以"/api"开头的http请求）
                '/api': {
                    // 配置一个base url
                    target: apiBaseUrl,
                    // 是否修改源，它决定我们是否跨域
                    changeOrigin: true,
                    // 是否重写我们的拦截关键字
                    // 以下面这行为例，表示将请求url中的/api替换成空字符串
                    pathRewrite: {
                        '^/api': '',
                    },
                },
            },
        };
    };
}

module.exports = {
    webpack: override(
        // 加载less文件
        addLessLoader({
            lessOptions: {
                javascriptEnabled: true,
            },
            sourceMap: true,
        }),
        // antd按需加载工具, 具体用法参考以下链接
        // https://github.com/ant-design/babel-plugin-import
        fixBabelImports('import', {
            libraryName: 'antd', // ui库的名字 可选antd-mobile
            libraryDirectory: 'es',
            style: true, // true表示使用less, 可选 css
        }),
        // remUnit设为75，12px的文字大小需要写成24px
        // remUnit设为37.5，12px的文字大小就是12px
        // addPostcssPlugins([
        //     require('postcss-px2rem-exclude')({
        //         remUnit: 75,
        //         exclude: /node_modules/i, // 表示忽略node_modules下的所有文件，避免影响第三方的设置比如antd
        //     }),
        // ]),

        config => {

            // 增加plugin
            config.plugins.push(new SpritesmithPlugin({
                src: {
                    cwd: path.resolve(__dirname, 'src/assets/icon'),
                    glob: '*.jpeg',
                },
                target: {
                    image: path.resolve(__dirname, 'src/assets/sprite.jpeg'),
                    css: path.resolve(__dirname, 'src/assets/sprite.less'),
                },
                apiOptions: {
                    cssImageRef: 'sprite.jpeg',
                },
            }));
            // 增加loader
            config.module.rules[1].oneOf.push();
            // 返回修改过的config
            return config;
        }
    ),
    devServer: overrideDevServer(addProxy()),
};